import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input,Select, InputNumber, Radio, Modal, Cascader } from 'antd'
import style from './detail/index.less'

const FormItem = Form.Item
const Option = Select.Option

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}


const modal = ({
  item = {},
  onOk,
  onChangeStatus,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  ...modalProps
}) => {
  const {isFree}=modalProps
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
      onOk(data)
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }
  const handleChange= (value) =>{
    onChangeStatus(value)
    }



  return (

    <Modal {...modalOpts}>
      <Form layout="horizontal">


        <FormItem label="主机ip" hasFeedback {...formItemLayout}>
          {getFieldDecorator('ip', {
            initialValue: item.fields?item.fields.ip:item.ip,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="用户名" hasFeedback {...formItemLayout}>
          {getFieldDecorator('user', {
            initialValue: item.fields?item.fields.user:item.user,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="密码" hasFeedback {...formItemLayout}>
          {getFieldDecorator('password', {
            initialValue: item.fields?item.fields.password:item.password,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input type="password"/>)}
        </FormItem>
        <FormItem label="状态" hasFeedback {...formItemLayout} className={item.fields?'':style.hiddentype}>
          {getFieldDecorator('status', {
            initialValue: item.fields?item.fields.status:'0',
            rules: [
              {
                required: true,
              },
            ],
          })(<Select defaultValue='0' style={{ width: 120 }} onChange={handleChange}>
            <Option value="0">空闲</Option>
            <Option value="1">锁定</Option>
          </Select>)}
        </FormItem>

        <FormItem label="使用者" hasFeedback {...formItemLayout} className={item.fields?'':style.hiddentype}>
          {getFieldDecorator('use_by', {
            initialValue: item.fields?item.fields.use_by:item.use_by,
          })(<Input disabled={isFree}/>)}
        </FormItem>
        <FormItem label="服务机系统" hasFeedback {...formItemLayout}>
          {getFieldDecorator('os_type', {
            initialValue: item.fields?item.fields.os_type:item.os_type,
            rules: [
              {
                required: true,
              },
            ],
          })(<Select defaultValue="0" style={{ width: 120 }}>
            <Option value="0">Linux</Option>
            <Option value="1">Windows</Option>
            <Option value="2">Docker</Option>
          </Select>)}
        </FormItem>
        <FormItem label="pk" hasFeedback {...formItemLayout} className={style.hiddentype}>
          {getFieldDecorator('pk', {
            initialValue: item.pk,
          })(<Input disabled/>)}
        </FormItem>

      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
